import {Action, TableCard} from '@/components'
import {Button, message, Modal} from 'antd'
import {http, navigate} from 'libs'
import {observer} from 'mobx-react'
import React from 'react'
import store from './store'

// id=1,sn=zs,name=丹尼斯超市,contact=张三,phone=186xxx,region=[河南省,郑州市,中原区],address=中原路88号
export default observer(function () {
  const columns = [{
    title: 'No.',
    key: 'series',
    width: 50,
    render: (_, __, index) => <span className="idx">{index + 1}</span>,
  }, {
    title: '业务日期',
    dataIndex: 'created_at',
  }, {
    title: '单据编号',
    dataIndex: 'sn',
  }, {
    title: '经手人',
    dataIndex: 'handler_name',
  }, {
    // title: "仓库全称",
    // dataIndex: "warehouse_name",
    // }, {
    title: '往来单位',
    dataIndex: 'supplier_name',
  }, {
    title: '总价格',
    dataIndex: 'total_amount',
  }, {
    title: '单据备注',
    dataIndex: 'remarks',
  }, {
    title: '制单人',
    dataIndex: 'created_by_name',
  }, {
    title: '操作',
    width: 80,
    render: info => (
      <Action>
        <Action.Button disabled={info.is_cancelled} danger onClick={() => handleDelete(info)}>作废</Action.Button>
      </Action>
    ),
  }]

  function handleDelete(info) {
    Modal.confirm({
      title: '操作确认',
      content: `确定要作废【${info['sn']}】?`,
      onOk: () => {
        return http.patch('/api/payment/', {id: info.id, action: 'cancel'})
          .then(() => {
            message.success(`单据【${info['sn']}】已作废`)
            store.fetchRecords()
          })
      },
    })
  }

  return (
    <TableCard
      title="付款单列表"
      rowKey="id"
      bordered
      loading={store.fetching}
      dataSource={store.dataSource}
      columns={columns}
      pagination={{
        showSizeChanger: true,
        showLessItems: true,
        hideOnSinglePage: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      }}
      onRow={(info) => {
        return {
          onDoubleClick: () => navigate(`/bank/payment/create/${info.id}`),
        }
      }}
      onReload={store.fetchRecords}
      actions={[
        <Button type="primary" onClick={() => navigate('/bank/payment/create')}>新建付款单</Button>,
      ]}/>
  )
})
